<template>
    <div style="padding-bottom:20px;">
        <div
                style="display:flex;    align-items: center;    justify-content: center;padding-top: 10px;padding-bottom: 10px;;">
            <!-- logo -->
            <img :src="logoResource" style="width:28px;height: 28px;" alt="">
            <h3 style="font-size:14px;font-weight:600;color:#fff;margin-left:15px;" v-if="!collapse">狮之谦ERP系统 </h3>
        </div>


        <el-menu ref="menu"
                 class="el-menu-demo"
                :default-active="defaultActiveIndex"
                 background-color="#304156"
                 text-color="rgb(191, 203, 217)" active-text-color="#1890ff"
                 :collapse="collapse"
                 @open="openMenu">
            <leftMenuItem v-on="$listeners" v-for="(item,index) in menus" :key="index" :item="item"
            />
        </el-menu>
    </div>
</template>
<script>
import logoResource from '/img/logo.jpg'
  import * as authApi from '@/api/auth.api.js';
  import { safeParseJson } from '@base/utils';
  import leftMenuItem from './leftMenuItem.vue'

  export default {
    data() {
      return {
        logoResource,
        menus: [],
        defaultActiveIndex: this.$props.activedKey,
      };
    },
    components: {
      leftMenuItem,
    },
    props: {
      collapse: { type: Boolean },
      activedKey: { type: [String, Number] },
    },
    watch: {
      '$props.activedKey'(activedKey) {
        this.defaultActiveIndex = `${activedKey || ''}`;
        this.$refs.menu.activedIndex = `${activedKey || ''}`;
      },
    },
    mounted() {
      this.initByDialog();
    },
    methods: {
      async initByDialog() {
        //获取资源
        var menuResult = await authApi.authgetmenu(0);
        if (menuResult && menuResult.success) {
          this.menus = menuResult.data || [];

          //填充 缓存的menus
          this.fixedMenusFromCache(this.menus);

          console.log('menu with cacha', this.menus);

        }
      },
      openMenu(menu) {
        menu && menu.id && this.$refs['menu'].open(menu && menu.id);
      },
      /**
       * @params
       * @desc activeKey 一直在 中间
       * @return
       */
      fixedScrollCss() {
       /* var index = this.tabsList2.findIndex(item => item.id == this.$props.activeKey);
        var scrollX = 0;
        if (index >= 0) {
          scrollX = index * 88;

          console.log('activeKey index scrollx ', this.$props.activeKey, index, scrollX);

          this.$nextTick(() => {
            document.documentElement.querySelector('.simplebar-content-wrapper').scrollLeft = scrollX;
          });*/
          debugger


      },
      fixedMenusFromCache(menus) {
        for (let index = 0; index < menus.length; index++) {
          const menuitem = menus[index];
          let childMenus = safeParseJson(localStorage.getItem(`menu_v2_${menuitem && menuitem.id}`)) || [];

          this.fixedMenusFromCache(childMenus);

          if (menuitem && childMenus && childMenus.length > 0) {
            menuitem.children = childMenus;
          }
        }
      },
    },
  };
</script>
